<template>
  <div>
    <div class="b_table">
      <div style="display: flex; align-items: center; justify-content: space-between; height: 60px">
        <div> </div>
        <div style="position: relative; bottom: 10px">
          <a-button type="primary" @click="handleEdit"> 新增商品 </a-button>
        </div>
      </div>
      <a-table
        style="position: relative; bottom: 5px"
        ellipsis
        :loading="loading"
        bordered
        size="middle"
        class="ant-table-striped"
        :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
        :data-source="data.data"
        :columns="columns"
        stripe
        @change="Change"
      >
        <!-- headerCell个性化单元头,表的头 -->
        <template #headerCell="{ column }">
          <!-- 限制只有name才能是蓝色 -->
          <template v-if="column.key === 'goodsName'">
            <span style="color: #1890ff">商品名称</span>
          </template>
        </template>
        <!-- 搜索 -->

        <!-- 个性化单元格，数据 -->
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'goodsType'">
            <div class="editable-row-operations">
              <a-tag color="#108ee9">
                <span v-if="record.goodsType == '1'">快递自提都支持</span>
                <span v-if="record.goodsType == '2'">自提</span>
                <span v-if="record.goodsType == '3'">到店消费</span>
                <span v-if="record.goodsType == '4'">快递自提</span>
                <span v-if="record.goodsType == '5'">全部支持</span>
              </a-tag>
            </div>
          </template>

          <template v-if="column.dataIndex === 'extJson'">
            <div class="editable-row-operations">
              <a-tag :color="record.extJson == '1' ? 'violet' : 'red'">
                <span v-if="record.extJson == '1'">推荐</span>
                <span v-if="record.extJson == '0'">不推荐</span>
              </a-tag>
            </div>
          </template>

          <template v-if="column.dataIndex === 'goodsStatus'">
            <a-switch
              v-model:checked="record.goodsStatus"
              checked-children="上架"
              un-checked-children="下架"
            />
          </template>

          <template v-else-if="column.key === 'caozuo'">
            <div style="display: flex; justify-content: space-around">
              <el-icon @click="DataEdit(record)" color="#0960bd"><Edit /></el-icon>
              <el-icon @click="handleDelete(record)" color="red"><Delete /></el-icon>
            </div>
          </template>
        </template>
        <!-- 这个是二级table -->
        <!-- <template #expandedRowRender="{ record }">
          <p style="margin: 0">
            {{ record.nickName }}
          </p>
        </template> -->
      </a-table>
    </div>
    <a-drawer
      title="商品新增和编辑"
      width="90%"
      :open="open"
      :body-style="{ paddingBottom: '80px' }"
      :footer-style="{ textAlign: 'right' }"
      @close="onClose"
    >
      <goodsAdd
        @onReturn="onReturn"
        :options3="options3"
        :select_title="select_title"
        :select_data="select_data"
      />
      <!-- <template #footer>
        <a-space>
          <a-button @click="onClose">预览</a-button>
          <a-button type="primary" @click="onClose">添加数据</a-button>
        </a-space>
      </template> -->
    </a-drawer>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  // import { adminStore } from '/@/store/locality/admin';
  import { Edit, Delete } from '@element-plus/icons-vue';
  import goodsAdd from './components/goodsAdd.vue';
  import { commoditystore } from './components/goodsList';
  import message from '../../form-design/utils/message';

  {
    goodsAdd;
  }
  onMounted(() => {
    getData();
    getType();
  });

  const select_data: any = ref();
  const select_title: any = ref('新增');
  function onReturn(item, type) {
    onClose();
    if (type == '新增') addgoods(item);
    else editgoods(item);
  }
  async function addgoods(item) {
    const Data = await commoditystore.goodsAdd(item);
    console.log(Data);

    if (Data.code == 200) {
      message.success('新增成功!');
      getData();
    } else {
      message.success(Data.message);
    }
  }

  async function editgoods(item) {
    const Data = await commoditystore.goodsEdit(item);

    if (Data.code == 200) {
      message.success('编辑成功!');
      getData();
    } else {
      message.success(Data.message);
    }
  }

  const open = ref<boolean>(false);

  const onClose = () => {
    open.value = false;
  };
  const DataEdit = (item) => {
    localStorage.setItem('sum', '1');
    select_title.value = '编辑';
    select_data.value = item;
    open.value = true;
    console.log(item);
  };

  const Change = (pagination: any) => {
    console.log(pagination);
  };

  function handleEdit(record: Recordable) {
    localStorage.setItem('sum', '1');

    select_title.value = '新增';
    select_data.value = '';
    open.value = true;
  }
  async function handleDelete(item) {
    var Data = {
      id: item.id,
    };
    const d = await commoditystore.goodsDel(Data);
    if (d.code == 200) getData();

    message.success(d.message);
  }
  const loading = ref(true);

  const data = ref({
    data: [],
    loading: true,
    border: true,
    rolesList: [],
    total: 0,
    pageNum: 1,
    pageSize: 20,
  });

  const options3: any = ref([]);
  async function getType() {
    options3.value = [];
    const d = await commoditystore.getgoodsType({});

    d.data.filter((item) => {
      options3.value.push({
        label: item.categoryName,
        value: item.id,
      });
    });
  }

  async function getData() {
    const d = await commoditystore.GetgoodsList({
      pageNum: data.value.pageNum,
      pageSize: data.value.pageSize,
    });

    data.value.data = d.data;
    loading.value = false;
    data.value.loading = false;
    data.value.total = d.total;
  }
  const searchInput = ref();
  // 数据规格
  const columns = [
    {
      title: '商品名称',
      dataIndex: 'goodsName',
      key: 'goodsName',
      align: 'center',
      // 开启搜索
      customFilterDropdown: true,
      // 搜索过滤
      onFilter: (value, record) =>
        record.user_id.toString().toLowerCase().includes(value.toLowerCase()),
      onFilterDropdownOpenChange: (visible) => {
        if (visible) {
          setTimeout(() => {
            searchInput.value.focus();
          }, 100);
        }
      },
    },
    {
      title: '分类',
      dataIndex: 'categoryId',
      key: 'categoryId',
      align: 'center',
    },

    {
      title: '店铺',
      dataIndex: 'business_id',
      key: 'business_id',
      align: 'center',
    },
    {
      title: '价格',
      dataIndex: 'goodsPrice',
      key: 'goodsPrice',
      align: 'center',
      // record.user_id.toString().toLowerCase().includes(value.toLowerCase()),
    },
    {
      title: '会员价格',
      dataIndex: 'memberPrice',
      key: 'memberPrice',
      align: 'center',
      // record.user_id.toString().toLowerCase().includes(value.toLowerCase()),
    },
    // {
    //   title: '规格',
    //   dataIndex: 'goodsSkuJson',
    //   key: 'goodsSkuJson',
    //   align: 'center',
    // },
    {
      title: '配送费',
      dataIndex: 'distributionFee',
      key: 'distributionFee',
      align: 'center',
    },
    {
      title: '推荐位',
      dataIndex: 'extJson',
      key: 'extJson',
      align: 'center',
    },
    {
      title: '配送方式',
      dataIndex: 'goodsType',
      key: 'goodsType',
      align: 'center',
    },
    {
      title: '库存',
      dataIndex: 'stockNum',
      key: 'stockNum',
      align: 'center',
    },
    {
      title: '状态',
      dataIndex: 'goodsStatus',
      key: 'goodsStatus',
      align: 'center',
    },
    {
      title: '操作',
      dataIndex: 'user_id',
      key: 'caozuo',
      width: 100,
      fixed: 'right',
      align: 'center',
    },
  ];
</script>
<style scoped>
  [data-doc-theme='light'] .ant-table-striped :deep(.table-striped) td {
    background-color: #fafafa;
  }

  [data-doc-theme='dark'] .ant-table-striped :deep(.table-striped) td {
    background-color: rgb(29 29 29);
  }

  .highlight {
    padding: 0;
    background-color: rgb(255 192 105);
  }

  .b_table {
    margin: 20px;
    padding: 10px;

    /* margin: 20px; */
    background: white;
  }

  .header {
    width: 97%;
    height: 60px;
    margin: 20px;
    background-color: white;
  }
</style>
